<link rel="stylesheet" href="__PUBLIC__/admin/css/bootstrap.css">
<style type="text/css">
    element.style {
        display: block;
        padding-right: 17px;
    }
    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: none;
        outline: 0;
    }
</style>
<div class="content"> 
                <div class="operation">
                    <div class="pull-left">
                        <button data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-plus"></span>添加</button>
                        <!-- <button class="add"><span class="glyphicon glyphicon-plus"></span>添加</button> -->
                        <!-- <button><span class="glyphicon glyphicon-trash"></span>删除</button> -->
                    </div>
                    <div class="right-box">
                        <input type="search" placeholder="搜索..." name="search" class="search" value="{$search}">
                        <span class="glyphicon glyphicon-search" id="sub"></span>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                    <tr>
                        <volist name="header" id="vo">
                            <th>{$vo}
                                <span>
                                    <a class="glyphicon glyphicon-triangle-top"></a>
                                    <a class="glyphicon glyphicon-triangle-bottom"></a>
                                </span>
                            </th>
                        </volist>
                        <th>操作
                            <span>
                                <a class="glyphicon glyphicon-triangle-top"></a>
                                <a class="glyphicon glyphicon-triangle-bottom"></a>
                            </span>
                        </th>
                    </tr>
                        <volist name="list" id="vo">
                        <tr>
                            <volist name="vo" id="v">
                                <td>{$v}</td>
                            </volist>
                            <td>
                                <!-- <a class="glyphicon glyphicon-pencil" data-target=".bs-example-modal-lg" href="{:U('Admin/Business/handle',array('act'=>'edit','admin_id'=>$vo['id']))}"></a> -->
                                <a class="glyphicon glyphicon-pencil add" id="{$vo['id']}" ></a>
                                <a class="glyphicon glyphicon-trash" href="{:U('Admin/Business/handle',array('act'=>'del','id'=>$vo['id']))}"></a>
                            </td>
                        </tr>
                        </volist>       
                </tbody>
            </table>
                <div class="page">
                    <span>共 {$count} 条</span>
                    <div class="paging">
                        {$page}
                    </div>
                    前往<input type="text" value="{$p}" name='page' onchange="mychange()">页
                </div>    
            </div>
        <div class="modal fade bs-example-modal-lg">
            <div class="modal-dialog modal-lg">
              <form action="{:U('Admin/Business/handle')}" method="post" enctype="multipart/form-data">
                <div class="modal-content">
                    <ul class="modal-list">
                      <input type="hidden" name="act" value="add">
                      <input type="hidden" name="id"> 
                        <li class="row">
                            <label class="col-sm-3">代理商名称：</label>
                            <div class="col-sm-9">
                                <select name="admin_id">
                                    <option value="">请选择客户名称</option>
                                    <volist name="lists" id="v">
                                      <option value="{$v['admin_id']}">{$v['user_name']}</option>
                                    </volist>
                                    
                                </select>
                            </div>
                        </li>
                        <li class="row">
                            <label class="col-sm-3">联系人：</label>
                            <div class="col-sm-9">
                                <input type="text" placeholder="请输入联系人" name="user_name">
                            </div>
                        </li>
                        <li class="row">
                            <label class="col-sm-3">电话：</label>
                            <div class="col-sm-9">
                                <input type="text" placeholder="请输入手机号码" name="phone">
                            </div>
                        </li>
                        <li class="row">
                            <label class="col-sm-3">QQ：</label>
                            <div class="col-sm-9">
                                <input type="text" placeholder="请输入QQ号" name="qq">
                            </div>
                        </li>
                        <li class="row">
                            <label class="col-sm-3">邮箱：</label>
                            <div class="col-sm-9">
                                <input type="email"  placeholder="请输入邮箱" name="email">
                            </div>
                        </li>
                        <li class="row">
                            <label class="col-sm-3"></label>
                            <div class="col-sm-9">
                                <button  type="submit" class="submit-btn">提交</button>
                            </div>
                        </li>
                    </ul>
                </div>
              </form>
            </div>
          </div>
<script type="text/javascript">
    $("#sub").click(function(){
        var search = $('.search').val();
        window.location.href = "/Admin/Business/index.html?search="+search;
    });

    function mychange(){
      var page =  $('input[name="page"]').val();
      window.location.href = "/index.php/Admin/Business/index/p/"+page;
    }

    document.onclick = function(e) {
        var modal = 　$('.modal').css('display');
        // console.log(modal);
        if(modal == 'block'){
            $('.modal').css('display','none');
            $(".modal").removeClass("show");
            $("body").removeClass("modal-open");
            $("body").css("padding-right",'0');
            $(".modal-backdrop").remove();
        }　　　　　
    }


    $(".add").click(function(){

        var id = $(this).attr('id');
        $.ajax({
            url:'/Admin/Business/edit',    //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            data:{
                id:id,
            },

            success: function (data) {
                if(data.state==1){
                    // console.log(data.data)
                    $.each(data.data, function (i, item) {
                        // console.log(i);
                        $('input[name='+i+']').val(item);
                    });
                    console.log(data.value);
                    $("select[name='admin_id']").find("option[value="+data.value+"]").attr("selected",true);

                }else{
                    console.log(data.data)
                    return false;
                }
            }
        })

        $("body").addClass("modal-open");
        $(".modal").addClass("show");
        $('.modal').css('display','block');
        $('input[name="act"]').val('edit');
        $("body").append("<div class='modal-backdrop fade show'></div>");

    });
    
    $(".modal-content").click(function(event){
        event.stopPropagation();
    });

    $(".add").click(function(event){
        event.stopPropagation();
    });
</script>